<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 系统管理 <span class="c-gray en">&gt;</span> 操作日志</nav>
	<div id="sectionContent" class="Hui-article">
		<article class="cl pd-20">
			<div class="text-c">
        请求方式: <span class="select-box inline">
				<select class="select" id="methods">
          <option value="GET">GET</option>
					<option value="POST">POST</option>
          <option value="PUT">PUT</option>
          <option value="DELETE">DELETE</option>
          <option value="PATCH">PATCH</option>
          <option value="">查询所有</option>
				</select></span>

        业务平台: <span class="select-box inline">
				<select class="select" id="platforms" @change="loadModules">
					<option value="">查询所有</option>
				</select></span>

        业务模块: <span class="select-box inline">
				<select class="select" id="modules">
					<option value="">查询所有</option>
				</select></span>

        开始时间: <span class="select-box inline"><input class="input-text" type="text" id="startTime" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"></span>
        结束时间: <span class="select-box inline"><input class="input-text" type="text" id="endTime" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"></span>

					<a href="javascript:;" class="btn btn-success" v-on:click="search()"><i class="Hui-iconfont">&#xe709;</i> 查询</a>
			</div>
			<div class="mt-20">
				<table class="table table-border table-bordered table-bg">
					<thead>
						<tr><th colspan="10" scope="col">请求操作日志</th></tr>
						<tr class="text-c">
							<th>ID</th>
              <th>业务平台</th>
              <th>业务模块</th>
							<th>IP</th>
							<th>请求类型</th>
							<th>URI</th>
              <th>参数</th>
              <th>请求描述</th>
							<th>创建时间</th>
							<th>操作人</th>
						</tr>
					</thead>
					<tbody>
            <tr class="text-c" v-for="row in result.content">
							<td>{{row.id}}</td>
              <td>{{row.platformName}}</td>
              <td>{{row.moduleName}}</td>
              <td>{{row.reqIp}}</td>
							<td>{{row.method}}</td>
              <td>{{row.uri}}</td>
              <td>{{row.params}}</td>
              <td>{{row.describes}}</td>
              <td>{{row.createTime | formatDate}}</td>
							<td>{{row.operationUser}}</td>
						</tr>
					</tbody>
				</table>
				<div class="cl pd-5 bg-1 bk-gray mt-20">
	          <span class="l">当前显示{{currentPageNumber}}/{{totalPage}}页,共{{totalSize}}条记录</span>
						<div id="Pagination" class="pagination r"/>
	      </div>
			</div>
		</article>
	</div>
<script>
      new Vue({
          el:'#sectionContent',
          http: authorization(),
          data:{
              result:{},
              pageSize:10,
              totalPage:1,
              totalSize:0,
              currentPageNumber:1
          },
          created:function(){
							this.$http.get('/restful/base/v1.0/commmon/platforms').then((response) => {
									var content = responseObj(response).data;
									content.forEach(function(obj){
										$('#platforms').append("<option value='"+obj.code+"'>"+obj.name+"</option>");
									});
							}).catch(function(response) {
									alert(errorMsg(response));
							});
              this.search();
          },
          methods:{
              loadModules:function(){
                  var platform = $('#platforms option:selected') .val();

									$("#modules option").remove();
									$('#modules').append("<option value=''>查询所有</option>");

									this.$http.get('/restful/base/v1.0/reqlog/modules/'+platform).then((response) => {
											var content = responseObj(response).data;
											content.forEach(function(obj){
												$('#modules').append("<option value='"+obj.code+"'>"+obj.name+"</option>");
											});
									}).catch(function(response) {
											alert(errorMsg(response));
									});
              },
              pageselectCallback:function(currentPage){
                  if(currentPage == -1){
                      return true;
                  }
                  this.loadGrid(currentPage + 1,false);
                  return false;
              },
              search:function(){
                  this.loadGrid(1,true);
                  return;
              },
              loadGrid:function(pageNum,pagination){
                  this.currentPageNumber = pageNum;
                  var uri = '/restful/base/v1.0/reqlog/'+this.currentPageNumber+'/'+this.pageSize+"?method="+$('#methods option:selected') .val();
                  uri += '&platform='+$('#platforms option:selected') .val();
                  uri += '&module='+$('#modules option:selected') .val();

                  if('' != $('#startTime').val()){
                      uri += '&startCreateTime='+new Date($('#startTime').val()).getTime();
                  }
                  if('' != $('#endTime').val()){
                      uri += '&endCreateTime='+new Date($('#endTime').val()).getTime();
                  }
                  this.$http.get(uri).then((response) => {
                      var content = responseObj(response).data;
                      this.result = content;
                      this.totalPage = content.totalPage;
                      this.totalSize = content.totalSize;
											if(pagination){
                            $("#Pagination").pagination(this.totalSize, {
                                current_page: -1,//当前选中的页面
                                num_edge_entries: 2, //两侧显示的首尾分页的条目数
                                num_display_entries: 5, //主体页数
                                link_to: 'javascript:void(0);',
                                items_per_page: this.pageSize,//每页显示数量
                                callback: this.pageselectCallback,
                                prev_text:'上一页',
                                next_text:'下一页'
                            });
                        }
                  }).catch(function(response) {
                      alert(errorMsg(response));
                  });
              }
          },
          filters: {
              formatDate:function(time) {
                  return new Date(time).format("yyyy-MM-dd hh:mm:ss");
              }
          }
      });
  </script>
